<template>
  <div class="release_main">
    <head-top head-title="立即发布" torelease="发布" goBack="true" @torelease="addRelease"></head-top>
    <publish @getValue="getValue" @getImage="getImage" :holder="holder"></publish>
    <!--<div class="line"></div>-->
    <!--<div class="house_type">
      <ul>
        <li @click="choseVillage()">
          <span>选择小区：</span>
          <div>
            <span>{{village}}</span>
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </li>
      </ul>
    </div>-->
    <!--小区-->
    <!--<mt-popup-->
    <!--v-model="villageShow"-->
    <!--popup-transition="popup-fade" class="villageHeights">-->
    <!--<div class="village">-->
    <!--<p class="p">请选择小区</p>-->
    <!--<div class="plot-wrapper">-->
    <!--<div class="search">-->
    <!--<div class="search-wrapper">-->
    <!--<input type="text" placeholder="请输入小区的名称" v-model="keyword" @keyup.enter="search" @input="search">-->
    <!--<span class="search-icon" @click="search"></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<mt-index-list>-->
    <!--<mt-index-section :index="index" v-for="(item,index) in villageList" :key="index">-->
    <!--<div v-for="(list,index) in item" @click="goVillage(list)">-->
    <!--<mt-cell :title="list.title"></mt-cell>-->
    <!--</div>-->
    <!--</mt-index-section>-->
    <!--</mt-index-list>-->
    <!--</mt-popup>-->
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .release_main {
    width: 100%;
    background-color: #fff;
    padding-top: 40px;
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .house_type {
      background: #fff;
      ul {
        li {
          border-bottom: 1px solid #d7d7d7;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          line-height: 44px;
          span {
            font-size: 15px;
            margin-left: 10px;
          }
          div {
            span {
              color: #777777;
              margin-right: 10px;
              vertical-align: middle;
            }
            img {
              width: 10px;
              margin-right: 10px;
              vertical-align: middle;
            }
          }
        }
      }
    }
    .mint-popup {
      width: 85%;
      height: 200px;
      border-radius: 5px;
      .village {
        p {
          font-size: 15px;
          text-align: center;
          line-height: 44px;
          border-bottom: 1px solid #d7d7d7;
        }
        .village_list {
          height: 150px;
          overflow: auto;
          ul {
            li {
              width: 100%;
              text-align: center;
              span {
                display: inline-block;
                width: 100%;
                border-bottom: 1px solid #f2f2f2;
                font-size: 16px;
                color: #1b1b1b;
                line-height: 36px;
              }
            }
          }
        }
      }
    }
    .search {
      text-align: center;
      height: 44px;
      line-height: 44px;
      .search-wrapper {
        position: relative;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 92%;
        margin: 0 10px;
        border-radius: 4px;
        background-color: #e6e6e6;
        input {
          width: 118px;
          font-size: 14px;
          outline: none;
          border: none;
          background-color: #e6e6e6;
          &::-ms-input-placeholder {
            text-align: center;
          }
          &::-webkit-input-placeholder {
            text-align: center;
          }
        }
        .search-icon {
          position: absolute;
          top: 6px;
          /*right: 10px;*/
          display: inline-block;
          width: 17px;
          height: 17px;
          background-size: 17px 17px;
          background-repeat: no-repeat;
          @include bgimg('../home/images/search');
        }

      }
    }
    .villageHeights {
      width: 100%;
      height: 75%;
      .mint-indexlist {
        height: 78%;
      }
      .mint-indexlist-content {
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
    }
  }
</style>
<script>
  import headTop from '../../components/header/Header.vue'
  import qs from 'qs'
  import { Toast, Indicator } from 'mint-ui'
  import {
    loadUserId, loadVillageId, loadTitle
  } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import village from '../my/MyVillage.vue'
  import publish from '../common/publish.vue'
  // import { getVillageLoad, searchKeyword } from '../../api/cityVillage.js'

  export default {
    name: 'Release',
    components: {
      headTop,
      village,
      publish
    },
    data () {
      return {
        releaseDetail: '',
        serverIds: [],
        showLoading: false,
        villageShow: false,
        village: '',
        villageList: {},
        keyword: '',
        holder: '请对您维护的东西进行简单的描述(字数不超过200)'
      }
    },
    created () {
      // this.getPlot()
    },
    methods: {
      getValue (value) {
        this.releaseDetail = value
      },
      getImage (image) {
        // this.imagesLrz = image
        this.serverIds = image
      },
      addRelease () {
        setTimeout(function () {
          Indicator.close()
        }, 5000)
        if (!this.releaseDetail.trim().length || !this.releaseDetail || !this.serverIds.length) {
          Toast({
            message: '请填写完整信息',
            position: 'middle',
            duration: 1500
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        const url = `${commonUrl.apihost}index.php/home/Supervisor/add`
        const data = {
          content: this.releaseDetail,
          serverIds: this.serverIds,
          // areas_id: this.villageId,
          // areas_name: this.village,
          areas_id: loadVillageId(),
          areas_name: loadTitle(),
          user_id: loadUserId()
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            Indicator.close()
            Toast({
              message: res.data.data,
              position: 'middle',
              duration: 2000
            })
            history.replaceState({}, '', '/Home')
            this.$router.push('/Service')
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: res.data.data,
              position: 'middle',
              duration: 3000
            })
          }
          if (res.data.code === 401) {
            Indicator.close()
            Toast({
              message: '您的发表帖子已经触犯相关法律法规,暂时不能使用发帖和评论功能.',
              position: 'middle',
              duration: 3000
            })
          }
        })
      }
      // choseVillage () {
      //   this.villageShow = true
      // },
      // goVillage (item) {
      //   this.village = item.title
      //   this.villageShow = false
      //   this.villageId = item.id
      //   this.keyword = ''
      // },
      // 获取小区数据
      // getPlot () {
      //   getVillageLoad().then(res => {
      //     if (res.code === 200) {
      //       this.villageList = res.data
      //     }
      //   })
      // },
      // search () {
      //   searchKeyword(this.keyword).then(res => {
      //     if (res.code === 200) {
      //       this.villageList = res.data
      //     }
      //   })
      // }
    }
  }
</script>
